<template>
    <div class="header">
      
    <div @click="change"  class="arrow">
        <el-icon v-if="arrow"><d-arrow-left /></el-icon>
        <el-icon v-else><d-arrow-right /></el-icon>
    </div>
    <div class="text">后台管理系统</div>
    </div>
</template>

<script setup >
import {getCurrentInstance,ref} from 'vue'
const {proxy } = getCurrentInstance()
var bus =proxy.$bus
const change=()=>{
    bus.emit('change')
    arrow.value= !arrow.value
}
let arrow=ref(true)

</script>

<style scoped>
.header{
    width: 100%;
    height: 70px;
    background-color: #242F42;
    color:  white;
    display: flex;
    align-items: center;
}
.arrow{
   margin: 10px 20px 0;
   font-size: 20px;

}
.text{
   font-size: 25px;

}
</style>